<template>
  <el-container style="height:100%;" id="maintop">
    <el-header height="90px">
      <el-col :span="10" class="logo">
        <el-button type="primary" :icon="changenavbtnicon" size="mini" circle style="position:absolute;left:600px;top:31px;" @click="changenav"></el-button>
      </el-col>
      <el-col :span="4" class="userinfo">
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner"> 欢迎您 {{userTrueName}} <img src="./assets/userface.jpg" /></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleModPassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="userlist" v-if="usershowmenu">用户管理</el-dropdown-item>
            <el-dropdown-item @click.native="docsearchwinshow" id="litest">资料查询</el-dropdown-item>
            <el-dropdown-item @click.native="setup" id="sysfontsize">字体设置</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-header>
    <el-container class="main">
      <el-scrollbar wrap-style="overflow-x: auto;" style="height: 100%; width:100%;">
        <el-aside :style="'width:'+menuwidth+'px;'">
          <el-scrollbar wrap-style="overflow-x: auto;" style="height: calc(100% - 60px);">
            <!--导航菜单-->
            <el-menu :default-active="$route.path" :active="navselected" router unique-opened :collapse="isCollapse">
              <el-menu-item index="/home" exact><i class="el-icon- icon iconfont icon_xtsy"></i><span slot="title">系统首页</span></el-menu-item>
              <el-submenu index="1">
                <template slot="title"><i class="el-icon- icon iconfont icon_jcxx"></i><span slot="title">基础信息</span></template>
                <el-menu-item index="/dept" exact>机构编制</el-menu-item>
                <el-menu-item index="/person" exact>干部信息</el-menu-item>
                <el-menu-item index="/mingce">名册管理</el-menu-item>
                <el-menu-item index="/building">干部档案</el-menu-item>
                <el-menu-item index="/building">人事制度</el-menu-item>
              </el-submenu>
              <el-menu-item index="/building"><i class="el-icon- icon iconfont icon_gbxr"></i><span slot="title">干部选任</span></el-menu-item>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon- icon iconfont icon_jypx"></i><span slot="title">教育培训</span></template>
                <el-menu-item index="/building">干部素质体系</el-menu-item>
                <el-menu-item index="/building">干部培训</el-menu-item>
                <el-menu-item index="/building">培养计划</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title"><i class="el-icon- icon iconfont icon_rcgl"></i><span slot="title">日常管理</span></template>
                <el-menu-item index="/shenghuohui">民主生活会</el-menu-item>
                <el-menu-item index="/building">干部考核</el-menu-item>
                <el-menu-item index="/building">综合分析研判</el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title"><i class="el-icon- icon iconfont icon_gbjd"></i><span slot="title">干部监督</span></template>
                <el-menu-item index="/building">工作监督</el-menu-item>
                <el-menu-item index="/building">干部监督</el-menu-item>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title"><i class="el-icon- icon iconfont icon_rcjs"></i><span slot="title">人才建设</span></template>
                <el-menu-item index="/building">基本情况</el-menu-item>
                <el-menu-item index="/building">人才规划</el-menu-item>
                <el-menu-item index="/building">服务专家</el-menu-item>
              </el-submenu>
            </el-menu>
            <!--导航菜单-折叠后-->
          </el-scrollbar>
        </el-aside>
        <el-main :style="'padding-left:0px;padding-top:0; margin-left:'+menuwidth+'px; height:100%'">
          <div class="mainpage">
            <div class="grid-content bg-purple-light">
            <!--
              <el-col :span="24" class="breadcrumb-container">
                <strong class="title">{{$route.name}}</strong>
                <el-breadcrumb separator="/" class="breadcrumb-inner">
                  <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                    {{ item.name }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </el-col>
            -->
              <el-col :span="24" class="content-wrapper">
                <transition name="fade" mode="out-in">
                  <router-view></router-view>
                </transition>
              </el-col>
            </div>
          </div>
          <el-dialog title="字体设置" :visible.sync="setupFormVisible" >
            <el-form :model="setupForm" label-width="120px" ref="setupForm" style="min-height:300px;">
              <el-form-item label="字体大小" prop="fontsize">
                <el-select v-model="fontsize" placeholder="选择字体大小" @change="changesize">
                  <el-option
                    v-for="(item,index) in fontsizeopt"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-dialog title="资料查询" :visible.sync="docSearchFormVisible" width="98%" top="20px">
            <doc-search :resetdocform="docSearchFormVisible"></doc-search>
          </el-dialog>
        </el-main>
      </el-scrollbar>
    </el-container>
  </el-container>
</template>
<script>
import DocSearch from '@/components/DocSearch.vue'
export default {
  components: {
    DocSearch
  },
  data () {
    var validateRepetPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.modPasswordForm.NewPassword) {
        callback(new Error('两次输入新密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      usershowmenu: false,
      navselected: '/home',
      sysName: '自然资源部干部人事工作信息系统',
      collapsed: false,
      sysUserName: '',
      sysUserAvatar: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        doclist: []
      },
      modPasswordFormVisible: false,
      modPasswordLoading: false,
      modPasswordForm: {
        OldPassword: '',
        NewPassword: '',
        RepetPassword: ''
      },
      modPasswordFormRules: {
        OldPasswordx: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        NewPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        RepetPassword: [
          { validator: validateRepetPassword, trigger: 'blur' }
        ]
      },
      userTrueName: '',
      docSearchFormVisible: false,
      isCollapse: false,
      menuwidth: 260,
      changenavbtnicon: 'el-icon-arrow-left',
      fontsizeopt: ['特大', '大', '正常', '小'],
      fontsize: '正常',
      setupFormVisible: false,
      setupForm: {},
      supportcss: false
    }
  },
  methods: {
    setdefualtsize (fontsize) {
      localStorage.defaultsize = fontsize
    },
    getdefualtsize () {
      let fontsize = localStorage.defaultsize
      if (!fontsize) {
        fontsize = '正常'
      }
      return fontsize
    },
    changesize () {
      let addsize = 0
      if (this.fontsize === '特大') {
        addsize = 4
      }
      if (this.fontsize === '大') {
        addsize = 2
      }
      if (this.fontsize === '正常') {
        addsize = 0
      }
      if (this.fontsize === '小') {
        addsize = -2
      }
      this.setdefualtsize(this.fontsize)
      this.setsize(addsize)
    },
    setsize (addsize) {
      console.log('开始设置字号')
      // eslint-disable-next-line no-undef
      $('#app').css('--size', (16 + addsize) + 'px')
      // eslint-disable-next-line no-undef
      $('#app').css('--size14', (14 + addsize) + 'px')
      // eslint-disable-next-line no-undef
      $('#app').css('--size12', (12 + addsize) + 'px')
      // eslint-disable-next-line no-undef
      $('#app').css('--size18', (18 + addsize) + 'px')
      // eslint-disable-next-line no-undef
      $('#app').css('--size20', (20 + addsize) + 'px')
      console.log('设置字号结束')
    },
    handleModPassword () {
      this.modPasswordFormVisible = true
      this.modPasswordForm = {
        OldPasswordx: '',
        NewPassword: '',
        RepetPassword: ''
      }
    },
    setup () {
      this.setupFormVisible = true
    },
    userlist () {
      console.log('changeuser')
      this.$router.push('/user/')
    },
    docsearchwinshow () {
      this.docSearchFormVisible = true
    },
    logout () {
      var _this = this
      this.$http
        .post(`/account/logoff`)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.IsSuccess === true) {
            console.log('注销成功')
            _this.$router.push({name: 'login'})
          } else {
            console.log('注销失败:' + response.data.Msg)
            _this.$message({
              message: '注销失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    modPasswordSubmit: function () {
      var _this = this
      this.$refs.modPasswordForm.validate((valid) => {
        if (valid) {
          _this.modPasswordFormLoading = true
          let para = {
            oldp: _this.modPasswordForm.OldPasswordx,
            newp: _this.modPasswordForm.NewPassword
          }
          this.$http.post(`/account/changepassword`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.$message({
                message: '修改密码成功',
                type: 'success'
              })
              _this.modPasswordFormLoading = false
              _this.modPasswordFormVisible = false
            } else {
              console.log('修改密码失败:' + response.data.Msg)
              _this.$message({
                message: '修改密码失败:' + response.data.Msg,
                type: 'error'
              })
              _this.modPasswordFormLoading = false
            }
            _this.$refs['modPasswordForm'].resetFields()
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '修改密码失败:' + error,
              type: 'error'
            })
            _this.$refs['modPasswordForm'].resetFields()
            _this.modPasswordFormLoading = false
          })
        }
      })
    },
    showmenu: function () {
      let _this = this
      this.$http.post(`/account/userinfo`).then(function (response) {
        console.log(response.data.IsSuccess)
        if (response.data.IsSuccess === true) {
          _this.usershowmenu = response.data.Result
          _this.userTrueName = response.data.TrueName
        } else {
          console.log('获取失败:' + response.data.Msg)
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    changenav: function () {
      if (this.isCollapse === true) {
        this.isCollapse = false
        this.menuwidth = 260
        this.changenavbtnicon = 'el-icon-arrow-left'
      } else {
        this.isCollapse = true
        this.menuwidth = 80
        this.changenavbtnicon = 'el-icon-arrow-right'
      }
    }
  },
  mounted () {
    this.showmenu()
    this.fontsize = this.getdefualtsize()
    this.changesize()
    // eslint-disable-next-line no-undef
    let displaycss = $('#litest').css('display')
    console.log('displaycss')
    console.log(displaycss)
    // eslint-disable-next-line no-undef
    $('#app').css('--showmenu', displaycss)

    // this.supportcss = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)
  }
}
</script>
<style>
#sysfontsize{
  display: none;
  padding-top:12px;
  padding-bottom:12px;
  display: var(--showmenu) !important;
}

body .el-table th.gutter{
    display: table-cell!important;
}

body .el-table colgroup.gutter{
    display: table-cell!important;
}

.icon_xtsy{
  background: url(./assets/icon_xtsy.png) no-repeat;
}
.icon_jcxx{
  background: url(./assets/icon_jcxx.png) no-repeat;
}
.icon_gbxr{
  background: url(./assets/icon_gbxr.png) no-repeat;
}
.icon_jypx{
  background: url(./assets/icon_jypx.png) no-repeat;
}
.icon_rcgl{
  background: url(./assets/icon_rcgl.png) no-repeat;
}
.icon_gbjd{
  background: url(./assets/icon_gbjd.png) no-repeat;
}
.icon_rcjs{
  background: url(./assets/icon_rcjs.png) no-repeat;
}
i.el-icon-{
  width: 36px !important;
  height: 36px;
  margin-right:30px !important;
  margin-left:0 !important;
}
.el-submenu__title{
  font-size:var(--size14) !important;
  color:#fff !important;
  background:#0874c8;
  box-shadow:inset -15px 0 10px -17px #000;
}
.is-opened .el-submenu__title{
  background:#003d79 !important;
}
.is-active .el-submenu__title{
  background:#003d79 !important;
}
.el-submenu__title:hover{
  background:#003d79 !important;
  box-shadow:inset -15px 0 10px -17px #000;
}
.el-menu .is-active:hover{
  background:#003d79 !important;
  box-shadow:inset -15px 0 10px -17px #000;
}
.el-menu--inline .el-menu-item.is-active{
  background: #cfe4ef !important;
  color: #003f7d  !important;
}
.el-menu-item.is-active{
  background:#002e5b !important;
  color: #9ecade !important;
  font-weight: bolder
}
.el-menu-item:hover{
  background:#003d79 !important;
}
.el-menu-item{
  font-size:var(--size14) !important;
}
.el-submenu__title i{
  color:#9ecade
}
.el-pagination{
  float:right;
  padding: 10px;
}
.el-pagination__sizes{
  float: right;
}
.el-menu--collapse{
  width: 80px !important;
}
.el-table{
  font-size:var(--size) !important;
  color: #000 !important;
}
.el-dialog__body{
  color: #000 !important;
}
#app{
  color: #000 !important;
}
.el-form--inline .el-form-item__content{
  /* text-decoration: underline; */
}
.el-form-item__label{
  color: #000 !important;
}
.el-checkbox{
  color: #000 !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #0000FF !important;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #0000FF !important;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
  color: #000 !important;
}
.el-tree{
  color: #000 !important;
}
.el-table thead{
  color: #000 !important;
  font-size:var(--size14) !important;
}
.el-button{
  color: #000 !important;
}
.el-button--primary, .el-button--success, .el-button--danger{
  color: #fff !important;
}
.el-button--primary.is-plain{
  color: #0000FF !important;
}
.el-tabs__item.is-active{
  color: #0000FF !important;
}
.el-radio-button__inner{
  color: #0000FF !important;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color:#fff !important;
}
.el-step__title.is-success{
  color:#006600 !important;
}
.el-step__title.is-finish{
  color: #0000FF !important;
}
.el-step__title.is-wait{
  color: #000 !important;
}
.el-card{
  background:#F5F7FA !important;
}
.el-dropdown-link{
  font-size:var(--size14) !important;
}
h1{
  font-size:var(--size18) !important;
}
.list_cygn li a{
  font-size:var(--size18) !important;
}
.list_ywbl li{
  font-size:var(--size14) !important;
}
#optForm *,
.el-popover__title,
.el-card,
.el-tab-pane,
.el-form-item__content,
.el-form-item__label,
.el-radio__label{
  font-size:var(--size) !important;
}
.el-tabs__item,
.el-checkbox__label,
.custom-tree-node,
.el-button,
input,
#editswitch,
.el-switch__label *,
.el-breadcrumb,
.el-popover,
.el-radio-button__inner{
  font-size:var(--size14) !important;
}
.el-dialog__title{
  font-size:var(--size18) !important;
}
.el-tag,
.el-progress-bar__innerText{
  font-size:var(--size12) !important;
}
.bigfont{
  font-size:var(--size20) !important;
}
.el-radio{
  color: #000;
}
</style>
<style lang="scss" scoped>
.is-opened .el-menu-item{
  background: #0058AC;
}
.is-opened .el-menu-item:hover{
  background: #cfe4ef !important;
  color: #003f7d
}
html{
  height: 100%;
}
header{
  width: 100%;
  position: fixed;
  background: #0058AC;
  line-height: 90px;
  color: #fff;
  background: url(./assets/topback.jpg) no-repeat right #0058AC;
  top:0;
}
.main{
  height: calc(100% - 90px);
  margin-top: 90px;
  background: #fff;
}
.el-main{
  // width: calc(100% - 260px);
}
.mainpage{
  // padding:0 20px;
}
aside{
  // width:260px;
  background:#0874c8;
  height:100%;
  position: fixed;
  top: 0;
  bottom: 0;
  margin-top: 90px;
  box-shadow:inset -15px 0 10px -17px #000;
}
.logo {
  width: 567px;
  height: 51px;
  background: url(./assets/title.png);
  margin:19px 0 0 0;
  font-weight: bolder;
}
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 25px 0px 10px 10px;
          float: right;
        }
      }
    }
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
      .el-menu-item{
        background:#0874c8;
        box-shadow:inset -15px 0 10px -17px #000;
        color:#fff;
        //width: 260px;
      }
      .el-submenu{
        //width: 260px;
      }
      .el-submenu .el-menu-item{
        padding-left:60px !important;
      }
      .el-submenu .el-submenu__title{
        background:#0874c8;
        box-shadow:inset -15px 0 10px -17px #000;
        color:#fff;
      }
      .is-opened{
        background:#003d79;
        box-shadow:inset -15px 0 10px -17px #000;
        color: #fff !important;
      }
      .el-menu{
        border-right: 0 !important;
      }
</style>
